<template>
  <div class="dashboardWrapper" style="margin-top: 20px">
    <div class="cardRow">
      <!-- 循环渲染子组件，传递 platform、icon、influencers -->
      <InfluencersDetails
        v-for="item in platforms"
        :key="item.platform"
        class="dashboardCard"
        :platform="item.platform"
        :platformIcon="item.icon"
        :influencers="item.influencers"
      />
    </div>
  </div>
</template>

<script>
import InfluencersDetails from "./InfluencersDetails.vue";

export default {
  components: {
    InfluencersDetails,
  },
  data() {
    return {
      platforms: [
        // 每个平台对象需包含 name、icon、influencers 字段
        {
          platform: "Instagram",
          icon: require("@/assets/SocialMetrics/instagram.png"),
          influencers: [
            // 新增影响者数据字段
            {
              username: "insta_user1",
              followers: 145000,
              sentiment: 8,
            },
            {
              username: "insta_user2",
              followers: 98000,
              sentiment: 3,
            },
            {
              username: "insta_user1",
              followers: 145000,
              sentiment: 8,
            },
            {
              username: "insta_user2",
              followers: 98000,
              sentiment: 3,
            },
          ],
        },
        {
          platform: "x",
          icon: require("@/assets/SocialMetrics/X.png"),
          influencers: [
            // 新增影响者数据字段
            {
              username: "insta_user1",
              followers: 145000,
              sentiment: 8,
            },
            {
              username: "insta_user2",
              followers: 98000,
              sentiment: 3,
            },
            {
              username: "insta_user1",
              followers: 145000,
              sentiment: 8,
            },
            {
              username: "insta_user2",
              followers: 98000,
              sentiment: 3,
            },
          ],
        },
        {
          platform: "Linkedin",
          icon: require("@/assets/SocialMetrics/Linkedin.png"),
          influencers: [
            // 新增影响者数据字段
            {
              username: "insta_user1",
              followers: 145000,
              sentiment: 8,
            },
            {
              username: "insta_user2",
              followers: 98000,
              sentiment: 3,
            },
            {
              username: "insta_user1",
              followers: 145000,
              sentiment: 8,
            },
            {
              username: "insta_user2",
              followers: 98000,
              sentiment: 3,
            },
          ],
        },
        {
          platform: "Reddit",
          icon: require("@/assets/SocialMetrics/Reddit.png"),
          influencers: [
            // 新增影响者数据字段
            {
              username: "insta_user1",
              followers: 145000,
              sentiment: 8,
            },
            {
              username: "insta_user2",
              followers: 98000,
              sentiment: 3,
            },
            {
              username: "insta_user1",
              followers: 145000,
              sentiment: 8,
            },
            {
              username: "insta_user2",
              followers: 98000,
              sentiment: 3,
            },
          ],
        },
        {
          platform: "YouTube",
          icon: require("@/assets/SocialMetrics/YouTube.png"),
          influencers: [
            // 新增影响者数据字段
            {
              username: "insta_user1",
              followers: 145000,
              sentiment: 8,
            },
            {
              username: "insta_user2",
              followers: 98000,
              sentiment: 3,
            },
            {
              username: "insta_user1",
              followers: 145000,
              sentiment: 8,
            },
            {
              username: "insta_user2",
              followers: 98000,
              sentiment: 3,
            },
          ],
        },
        {
          platform: "TikTok",
          icon: require("@/assets/SocialMetrics/TikTok.png"),
          influencers: [
            // 新增影响者数据字段
            {
              username: "insta_user1",
              followers: 145000,
              sentiment: 8,
            },
            {
              username: "insta_user2",
              followers: 98000,
              sentiment: 3,
            },
            {
              username: "insta_user1",
              followers: 145000,
              sentiment: 8,
            },
            {
              username: "insta_user2",
              followers: 98000,
              sentiment: 3,
            },
          ],
        },
        {
          platform: "Threads",
          icon: require("@/assets/SocialMetrics/Threads.png"),
          influencers: [
            // 新增影响者数据字段
            {
              username: "insta_user1",
              followers: 145000,
              sentiment: 8,
            },
            {
              username: "insta_user2",
              followers: 98000,
              sentiment: 3,
            },
            {
              username: "insta_user1",
              followers: 145000,
              sentiment: 8,
            },
            {
              username: "insta_user2",
              followers: 98000,
              sentiment: 3,
            },
          ],
        },
        {
          platform: "Google",
          icon: require("@/assets/SocialMetrics/Google.png"),
          influencers: [
            // 新增影响者数据字段
            {
              username: "insta_user1",
              followers: 145000,
              sentiment: 8,
            },
            {
              username: "insta_user2",
              followers: 98000,
              sentiment: 3,
            },
            {
              username: "insta_user1",
              followers: 145000,
              sentiment: 8,
            },
            {
              username: "insta_user2",
              followers: 98000,
              sentiment: 3,
            },
          ],
        },
        {
          platform: "RedNote",
          icon: require("@/assets/SocialMetrics/RedNote.png"),
          influencers: [
            // 新增影响者数据字段
            {
              username: "insta_user1",
              followers: 145000,
              sentiment: 8,
            },
            {
              username: "insta_user2",
              followers: 98000,
              sentiment: 3,
            },
            {
              username: "insta_user1",
              followers: 145000,
              sentiment: 8,
            },
            {
              username: "insta_user2",
              followers: 98000,
              sentiment: 3,
            },
          ],
        },
        // 其他平台同理，补充 influencers 字段
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
/* 样式保持不变 */
.dashboardWrapper {
  border-radius: 8px;
}

.cardRow {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
}

.dashboardCard {
  flex: 1 0 calc(33.333% - 20px);
  margin: 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  border: 1px solid #cdcccc;
}
</style>
